@include('layouts.Common.header')
<script src="/plugins/codemirror/codemirror.js"></script>

<script src="/plugins/codemirror/mode/javascript/javascript.js"></script>

<link rel="stylesheet" href="/plugins/codemirror/codemirror.css">
<link rel="stylesheet" href="/plugins/codemirror/theme/monokai.css">
<form name="actionForm" id="actionForm" class="_autoheight" method="post" autocomplete="off">
    @csrf
    <div class="form-group row">
        <label class="col-sm-2  col-form-label text-right"><i>*</i>@人员Userid：</label>
        <div class="col-sm-3">
            <div class="selectuser"></div>
        </div>
        <label class="col-sm-2  col-form-label text-right"><i>*</i>消息类型：</label>
        <div class="col-sm-3">
            <select class="selectpicker" name=data[msgKey]>
                <option value="text" data-code='{ "content": "我就是我, 是不一样的烟火"}'>
                    text类型</option>
                <option value="markdown"
                    data-code='{"title":"杭州天气","text": "#### 杭州天气 \n> 9度，西北风1级，空气良89，相对温度73%\n> ![screenshot](https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-2400-1218.png)\n> ###### 10点20分发布 [天气](https://www.dingalk.com)\n"}'>
                    markdown类型</option>
                <option value="actionCard"
                    data-code='{"title": "打造一间咖啡厅", "text": "![screenshot](https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-2400-1218.png) \n #### 乔布斯 20 年前想打造的苹果咖啡厅 \n\n Apple Store 的设计正从原来满满的科技感走向生活化，而其生活化的走向其实可以追溯到 20 年前苹果一个建立咖啡馆的计划","singleTitle" : "阅读全文","singleURL" : "https://www.dingtalk.com/"}'>
                    整体跳转actionCard类型</option>
                <option value="actionCard"
                    data-code='{"title": "乔布斯 20 年前想打造一间苹果咖啡厅，而它正是 Apple Store 的前身", "text": "![screenshot](https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-2400-1218.png) \n\n #### 乔布斯 20 年前想打造的苹果咖啡厅 \n\n Apple Store 的设计正从原来满满的科技感走向生活化，而其生活化的走向其实可以追溯到 20 年前苹果一个建立咖啡馆的计划", "btnOrientation": "0", "btns": [{"title": "内容不错","actionURL": "https://www.dingtalk.com/"},{"title": "不感兴趣","actionURL": "https://www.dingtalk.com/"}]}'>
                    独立跳转actionCard类型
                </option>
                <option value="feedCard"
                    data-code='{"links": [{"title": "时代的火车向前开1", "messageURL": "https://www.dingtalk.com/", "picURL": "https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-2400-1218.png"},{"title": "时代的火车向前开2", "messageURL": "https://www.dingtalk.com/","picURL": "https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-2400-1218.png"}]}'>
                    feedCard类型</option>

            </select>

        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2  col-form-label text-right"><i>*</i>消息内容：</label>
        <div class="col-sm-8">
            <textarea id="codeMirrorDemo" name=data[msgParam]
                class="p-3">{ "content": "我就是我, 是不一样的烟火"}</textarea>
        </div>
    </div>


    <input type="dosubmit" id="dosubmit" name="dosubmit" hidden />
</form>

{!! js() !!}
<script>
    $(function() {
        $(".selectuser").select({!! json_encode($selectuser) !!});
        var editor = CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
            mode: "javascript",
            theme: "monokai",
        });
        editor.on("change", function() {
            $("#codeMirrorDemo").val(editor.getValue());
        });
        $(".selectpicker").change(function(a) {
            console.log(JSON.stringify($(this).find("option:selected").data("code")));
            editor.setValue(JSON.stringify($(this).find("option:selected").data("code")));
        })
    })
</script>
